<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./index.css">
</head>

<body>
    <!-- 导航栏 -->
    <nav>
        <ul>
            <li>主页</li>
            <li>排行榜</li>
            <li>联系方式</li>
        </ul>
    </nav>
    <!-- 头部内容 -->

    <header>
        <!-- 导航栏的按钮 -->
        <button id="toggle">导航栏</button>
        <!-- 标题 -->
        <h2>欢迎来到富豪排行榜</h2>
        <!-- 欢迎语句 -->
        <p>weclome to the rich rank</p>
        <!-- 登陆按钮 -->
        <button id="login">登陆</button>
    </header>
    <!-- 主题内容 -->
    <div class="container">
        <!-- 左盒子 -->
        <aside>
            <!-- 五个按钮 -->
            <button id="add-user">添加账户</button>
            <button id="double">资金翻倍</button>
            <button id="show-millionaire">查询百万富翁</button>
            <button id="sort">财富榜</button>
            <button id="calculate">计算总额</button>
        </aside>
        <!-- 右盒子 -->
        <main id="main">
            <h2>
                <strong>Person</strong>
                <span>Wealth</span>
            </h2>
        </main>
    </div>
    <script>

        const add = document.querySelector("#add-user")
        const double = document.querySelector("#double")
        const show = document.querySelector("#show-millionaire")
        const sort = document.querySelector("#sort")
        const cal = document.querySelector("#calculate")
        const main = document.querySelector("#main")


        //在本地存储获得arr
        let arr = JSON.parse(localStorage.getItem("arr"));
        //数据的数组名叫dataInfo
        let dataInfo;
        if (arr) {
            //假如arr是数组里面有内容，为真值，就用arr的内容重置页面
            updateDom(arr)
            //获取存储到arr里面的dataInfo与num
            dataInfo = JSON.parse(localStorage.getItem("dataInfo"))
            num = localStorage.getItem("num")
        } else {
            arr = []
            //假如数组里面没有内容是一个空数组的话，就重新请求
            const xhr = new XMLHttpRequest()
            xhr.open("GET", "http://localhost:3000/dataInfo")
            xhr.onload = function () {
                if (xhr.status >= 200 && xhr.status < 300) {
                    //获取到的dataIn转化为对象
                    dataInfo = JSON.parse(xhr.responseText)
                    //获取到的dataInfo进行本地存储
                    localStorage.setItem("dataInfo", JSON.stringify(dataInfo))
                }
            }
            xhr.send()
        }
        let num = 0;//准备变量统计点击次数
        add.addEventListener("click", addfn)//点击添加事件
        function addfn() {
            //点击一次添加一次金额
            arr.push(dataInfo[num])
            num++
            //重置页面
            updateDom(arr)
            //设置arr与num的本地存储
            localStorage.setItem("arr",JSON.stringify(arr))
            localStorage.setItem("num",num)
        }
        //封装一个重新加载页面的函数
        function updateDom(arr) {
            //上面person和wealth是固定不变的，所以每次重新加载都是这两个单词
            main.innerHTML = `
            <h2>
                <strong>Person</strong>
                <span>Wealth</span>
            </h2>
            `
            arr.forEach(function (item) {
                //创建div盒子
                var div = document.createElement("div")
                //给盒子添加类名.person
                div.classList.add("person")
                //将需要添加的姓名和金钱渲染到div盒子里
                div.innerHTML = `
                <strong>${item.name}</strong>
                ${reset(item.money)}
                `
                //将div元素添加在main标签里
                main.appendChild(div)
            })
        }
        //添加点击翻倍事件
        double.addEventListener("click", dbfn)
        function dbfn() {
            arr.forEach(function (item) {
                //遍历每个金钱都乘以2
                item.money *= 2
            })
            //重置页面
            updateDom(arr)
            //设置arr存储
            localStorage.setItem("arr",JSON.stringify(arr))
        }

        //添加点击筛选百万富翁事件
        show.addEventListener("click", showfn)
        function showfn() {
            //过滤剩下的金钱都是大于一百万的
            arr = arr.filter(function (item) {
                return item.money >= 1000000
            })
            //重置页面
            updateDom(arr)
            //设置arr存储
            localStorage.setItem("arr",JSON.stringify(arr))
        }

        //添加点击排序事件
        sort.addEventListener("click", sortfn)
        function sortfn() {
            //金钱按照由多到少排序
            arr.sort(function (a, b) {
                return b.money - a.money
            })
            //重置页面
            updateDom(arr)
            //设置arr存储
            localStorage.setItem("arr",JSON.stringify(arr))
        }

        //添加点击计算总金额事件
        cal.addEventListener("click", calfn)
        function calfn() {
            var acc = arr.reduce(function (prev, item) {
                return (prev += item.money)
            }, 0)
            var div = document.createElement("div")
            //将算出来的总金额渲染到页面上
            div.innerHTML = `
            <h2><strong>总金额</strong>${reset(acc)}</h2>
            `
            //重置页面
            main.appendChild(div)
        }

        //格式化金钱
        function reset(money) {
            var res = money.toLocaleString()
            return "$" + res + ".00"
        }

        //设置侧边栏
        var toggle = document.querySelector("#toggle")
        var body = document.querySelector("body")
        toggle.addEventListener("click", function () {
            body.classList.toggle("show_nav")
        })

        localStorage.setItem(`${arr}`)
    </script>
</body>

</html>